const readersModule = {
    init() {
        this.loadReaders();
    },

    loadReaders() {
        fetch(`${API_BASE_URL}/readers`)
            .then(response => response.json())
            .then(readers => {
                const html = `
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>读者管理</h2>
                        <button type="button" class="btn btn-primary" id="addReaderBtn">添加读者</button>
                    </div>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>卡号</th>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>邮箱</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${readers.map(reader => `
                                    <tr>
                                        <td>${reader.cardNumber}</td>
                                        <td>${reader.name}</td>
                                        <td>${reader.phone || '-'}</td>
                                        <td>${reader.email || '-'}</td>
                                        <td>
                                            <div class="action-buttons">
                                                <button class="btn btn-sm btn-warning edit-reader" data-id="${reader.id}">
                                                    编辑
                                                </button>
                                                <button class="btn btn-sm btn-danger delete-reader" data-id="${reader.id}">
                                                    删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
                $('#main-content').html(html);

                // 绑定事件
                $('#addReaderBtn').on('click', () => this.showAddReaderForm());
                $('.edit-reader').on('click', (e) => {
                    const readerId = $(e.target).data('id');
                    this.showEditReaderForm(readerId);
                });
                $('.delete-reader').on('click', (e) => {
                    const readerId = $(e.target).data('id');
                    this.deleteReader(readerId);
                });
            })
            .catch(handleError);
    },

    showAddReaderForm() {
        const html = `
            <div class="form-container">
                <h3>添加新读者</h3>
                <form id="addReaderForm" class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label class="form-label">卡号</label>
                        <input type="text" class="form-control" name="cardNumber" required>
                        <div class="invalid-feedback">请输入卡号</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control" name="name" required>
                        <div class="invalid-feedback">请输入姓名</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">电话</label>
                        <input type="tel" class="form-control" name="phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" name="email">
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="button" class="btn btn-secondary" onclick="readersModule.loadReaders()">返回</button>
                    </div>
                </form>
            </div>
        `;
        $('#main-content').html(html);

        // 表单验证和提交
        const form = document.getElementById('addReaderForm');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (!form.checkValidity()) {
                e.stopPropagation();
                form.classList.add('was-validated');
                return;
            }

            const formData = new FormData(e.target);
            const reader = Object.fromEntries(formData.entries());
            
            fetch(`${API_BASE_URL}/readers`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(reader)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('添加读者失败');
                }
                return response.json();
            })
            .then(() => {
                alert('添加成功！');
                this.loadReaders();
            })
            .catch(handleError);
        });
    }
}; 